<template>
	<view class="hy-navbar">
		<view class="hy-navbar__placeholder" :style="{
				height: $uv.addUnit($uv.getPx(height) + $uv.sys().statusBarHeight,'px'),
			}"></view>
		<view class="hy-navbar--fixed">
			<view :style="[statusBarStyle]"></view>
			<view class="hy-navbar__content">
				<view class="hy-navbar__content__left" v-if="isback" @click="goBack">
					<uv-icon name="arrow-left" color="#FFF" size="22"></uv-icon>
				</view>
				<view class="hy-navbar__content__left" v-else @click="handleLeftIcon">
					<slot name="left">
						<uv-icon :name="leftIcon" color="#FFF" size="24"></uv-icon>
					</slot>
				</view>
				<text class="hy-navbar__content__title">{{ title }}</text>
				<view class="hy-navbar__content__right">
					<slot name="right">
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'hyNavBar',
		props: {
			title: {
				type: String,
				default: ''
			},
			// 导航栏高度
			height: {
				type: [String, Number],
				default: '44px'
			},
			// 
			isback: {
				type: Boolean,
				default: false
			},
			// 左侧icon
			leftIcon: {
				type: String,
				default: 'list'
			},
			customStyle: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				
			}
		},
		created() {

		},
		computed: {
			statusBarStyle() {
				const style = {}
				// 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
				style.height = uni.$uv.addUnit(uni.$uv.sys().statusBarHeight, 'px')
				return uni.$uv.deepMerge(style, uni.$uv.addStyle(this.customStyle))
			},
		},
		methods: {
			// 左侧icon点击事件
			handleLeftIcon() {
				this.$emit('leftClick')
			},
			// 返回页面
			goBack() {
				uni.navigateBack()
				this.$emit('goBack')
			},
		},

	}
</script>

<style scoped lang="scss">

	.hy-navbar {

		&--fixed {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			z-index: 10;
			background: linear-gradient(180deg, $uv-primary, $uv-secondary);
			background-size: 100% 200px;
			background-position: 0 0;
		}

		&__content {
			@include flex(row);
			align-items: center;
			height: 44px;
			position: relative;
			justify-content: center;

			&__left,
			&__right {
				padding: 0 13px;
				position: absolute;
				top: 0;
				bottom: 0;
				@include flex(row);
				align-items: center;
			}

			&__left {
				left: 0;

				&--hover {
					opacity: 0.7;
				}

				&__text {
					font-size: 15px;
					margin-left: 3px;
				}
			}

			&__title {
				text-align: center;
				font-size: 16px;
				color: #fff;
			}

			&__right {
				right: 0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				&__text {
					font-size: 15px;
					margin-left: 3px;
				}

				.message {
					display: inline-block;
					position: relative;
					padding: 0 12rpx;
					margin-right: 12rpx;
					right: 46rpx;

					&_num {
						width: 30rpx;
						height: 30rpx;
						background-color: #FF0000;
						position: absolute;
						top: -8rpx;
						right: -8rpx;
						border-radius: 15rpx;
						color: #fff;
						font-size: 24rpx;
						text-align: center;
						line-height: 28rpx;
					}

					&_numMax {
						width: 50rpx;
						right: -28rpx;
					}
				}
			}

			.user {
				right: 0rpx;
			}
		}
	}
</style>